<template>
  <Card>

    <Tabs type="card">
        <TabPane label="通知管理">
          <div class="flexCSB">
            <Button type="primary" @click="create">新增通知</Button>
            <Input
              v-model="title"
              style="width:300px"
              @on-change="change"
              suffix="ios-search"
              placeholder="请输入通知名称"
            ></Input>
          </div>
          <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
          <Page
          show-total
            class="page"
            :total="total"
            :current.sync="current"
            show-elevator
            @on-change="changePage"
          />
        </TabPane>
        <TabPane label="公告管理">
          <div class="flexCSB">
            <Button type="primary" @click="create2">新增公告</Button>
            <Input
              v-model="title2"
              style="width:300px"
              @on-change="change2"
              suffix="ios-search"
              placeholder="请输入公告名称"
            ></Input>
          </div>
          <Table class="table" :loading="loading3" highlight-row :columns="columns2" :data="data2"></Table>
          <Page
            class="page"
            :total="total2"
            :current.sync="current2"
            show-elevator
            @on-change="changePage2"
          />
        </TabPane>
    </Tabs>

    <!-- 通知管理 -->
    <Modal title="操作" v-model="modal" width="50">
      <Form ref="form" :model="newData" :label-width="90">
        <FormItem label="通知名称：">
          <Input v-model="newData.title" placeholder="请输入通知名称"></Input>
        </FormItem>
        <FormItem label="通知内容：">
          <!-- <vue-wangeditor :value="newData.content" @catchData="catchData"></vue-wangeditor> -->
          <vue-tinymce :value="newData.content" @catchData="catchData"></vue-tinymce>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button class="Button" type="warning" @click="modal = false">关闭</Button>
        <Button class="Button" type="primary" @click="submit" :loading="loading2">确认提交</Button>
      </div>
    </Modal>

    <!-- 公告管理 -->
    <Modal title="操作" v-model="modal2" width="50">
      <Form ref="form" :model="newData2" :label-width="90">
        <FormItem label="公告名称：">
          <Input v-model="newData2.content" placeholder="请输入通知名称"></Input>
        </FormItem>
        <FormItem label="截止日期：">
          <DatePicker :options="options" v-model="newData2.expireDate" type="datetime" :clearable="false" :editable="false" placeholder="请选择通知截止日期" style="width:100%"></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button class="Button" type="warning" @click="modal2 = false">关闭</Button>
        <Button class="Button" type="primary" @click="submit2" :loading="loading4">确认提交</Button>
      </div>
    </Modal>



  </Card>
</template>

<script>
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,

      modal: false,
      newData: {
        content: "",
        title: ""
      },

      modal2: false,
      newData2: {
        content: "",
        expireDate: ""
      },
      id: '',


      columns: [
        { title: "通知名称", key: "title", align: "center" },
        {
          title: "通知内容",
          align: "center",
          render: (h, params) => {
            return h("span", {
              domProps: {
                innerHTML: params.row.content
              }
            });
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "success" },
                  on: {
                    click: () => {
                      this.del(params);
                    }
                  }
                },
                "删除通知"
              )
            ]);
          }
        }
      ],
      data: [],
      total: 0,
      title: "",
      current: 1,

      columns2: [
        { title: "公告名称", key: "content", align: "center" },
        { title: "截止日期", key: "expireDate", align: "center" },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "success" },
                  style:{
                    'marginRight': '10px'
                  },
                  on: {
                    click: () => {
                      this.changeGonggao(params);
                    }
                  }
                },
                "修改公告"
              ),
               h(
                "Button",
                {
                  props: { type: "error" },
                  on: {
                    click: () => {
                      this.del2(params);
                    }
                  }
                },
                "删除公告"
              )
            ]);
          }
        }
      ],
      data2: [],
      total2: 0,
      title2: "",
      current2: 1,
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now()
        }
      },

      size: 10,
      





    };
  },
  created() {
    this.getServiceNotice();
    // this.getBroadcastNotifyByPage()
  },
  methods: {
    create2(){
      this.modal2 = true;
      this.newData2 = {
        content: "",
        expireDate: ""
      };
      this.id = ''
    },
    catchData2(data){
      this.newData2.content = data
    },
    getBroadcastNotifyByPage(){
      this.loading3 = true;
      this.$http(
        "/stage/notice/getBroadcastNotifyByPage",
        {
          current: this.current2,
          size: this.size,
          content: this.title2
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.data2 = res.data.data.records;
            this.total2 = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading3 = false;
        }
      );
    },
    submit2() {
      if(this.newData2.content == ''){
        this.$Message.error('公告名称不能为空')
        return false
      }
      if(this.newData2.expireDate == ''){
        this.$Message.error('公告截止日期不能为空')
        return false
      }
      let data = {}
      if(this.id == ''){
        data = {
          content: this.newData2.content,
          expireDate: this.getTime2(this.newData2.expireDate),
        }
      }else{
        data = {
          content: this.newData2.content,
          expireDate: this.getTime2(this.newData2.expireDate),
          id: this.id
        }
      }
      this.loading4 = true;
      this.$http(
        "/stage/notice/saveOrUpdateBroadcastNotify",data,
        "post",
        res => {
          if (res.data.code == 200) {
            this.$Message.success("操作成功");
            this.getBroadcastNotifyByPage();
            this.modal2 = false;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading4 = false;
        }
      );
    },
    changeGonggao(params){
      this.modal2 = true;
      this.newData2 = {
        content: params.row.content,
        expireDate: params.row.expireDate
      };
      this.id = params.row.id
    },
    del2(params){
      this.$Modal.confirm({
        title: "提示",
        content:
          "<p>确定要删除公告<strong> " +
          params.row.content +
          " </strong>吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/notice/deleteBroadcastNotify",
            {
              id: params.row.id
            },
            "get",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("删除公告成功");
                this.current2 = 1
                this.getBroadcastNotifyByPage();
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        },
        onCancel: () => {}
      });
    },
    change2(){
      this.current2 = 1
      this.getBroadcastNotifyByPage()
    },
    changePage2(data){
      this.current2 = data;
      this.getBroadcastNotifyByPage();
    },










    getServiceNotice() {
      this.loading1 = true;
      this.$http(
        "/stage/notice/getServiceNotice",
        {
          current: this.current,
          size: this.size,
          title: this.title
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.getBroadcastNotifyByPage()
            this.data = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    catchData(data) {
      this.newData.content = data;
    },
    changePage(data) {
      this.current = data;
      this.getServiceNotice();
    },
    change() {
      this.current = 1;
      this.getServiceNotice();
    },
    del(params) {
      this.$Modal.confirm({
        title: "提示",
        content:
          "<p>确定要删除通知<strong> " +
          params.row.title +
          " </strong>吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/notice/deleteNotice",
            {
              id: params.row.id
            },
            "get",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("删除通知成功");
                this.getServiceNotice();
              } else {
                this.$Message.error(res.data.msg);
              }
            }
          );
        },
        onCancel: () => {}
      });
    },
    create() {
      this.modal = true;
      this.newData = {
        content: "",
        title: ""
      };
    },
    submit() {
      this.loading2 = true;
      this.$http(
        "/stage/notice/publishNotice",
        {
          content: this.newData.content,
          title: this.newData.title
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.$Message.success("新增通知成功");
            this.getServiceNotice();
            this.modal = false;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        }
      );
    },




  }
};
</script>

<style scoped>
</style>